// 入口文件
import Vue from "vue"
// 配置vuex的步骤
/**
 * 1. 运行 cnpm i vuex -S
 * 2. 导入包 
 * 3. 注册vuex到Vue
 * 4. new Vue.store实例
 */
import Vuex from "vuex"
Vue.use(Vuex)

// 页面加载的时候 获取本地localStorage 中的car对象数组
var car = JSON.parse(localStorage.getItem('car') || '[]')

const store = new Vuex.Store({ 
    state:{//this.$store.state.data_name
        // 将购物车中的商品的数据 用数组储存起来 对象数组 {id:,number:,price:,selected:}
        car:car
    },
    // 修改state中数据的 方法的集合
    mutations:{// this.$store.commit('方法的名字','唯一参数')
        // 对car 做的每一步处理 都得通过更新到 localStorage
        addToCar(state,goodsinfo){
            // 点击加入购物车 吧商品信息 保存到car中
            // 1.如果购物车 原本就有该商品  那么只需要更新数量
            var flag = false;
            state.car.some(item=>{
                if (item.id == goodsinfo.id) {
                    item.number += parseInt(goodsinfo.number);
                    flag = true;
                    return true;
                }
            })
            // 2.如果没有 直接push
            if (!flag) {
                state.car.push(goodsinfo);
            }

            // 当更新完 car之后 将car数组 存储到本地的 localStorage
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsNumber(state,goodsinfo){
            // 修改购物车中 商品的数量
            state.car.some(item=>{
                if (item.id == goodsinfo.id) {
                    item.number = parseInt(goodsinfo.number);
                    return true;
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        delFromCar(state,id){
            // 根据id 从car中删除对应的item
            state.car.some((item,i)=>{
                if (item.id == id) {
                    state.car.splice(i,1);
                    return true;
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsSelected(state,info) {
            // 组件点击 switch 组件 修改car中的数据
            state.car.some(item=>{
                if (item.id == info.id) {
                    item.selected = info.selected;
                    return true;
                }
            })
            localStorage.setItem('car',JSON.stringify(state.car))
        },   
    },
    // 获取state中的数据并进行一定修改的 方法的集合 不能修改  --> 类似过滤器 以及computed
    getters:{// this.$store.getters.methods_name
        getAllNum(state){
            var c = 0;
            state.car.forEach(item=>{
                c += item.number;
            })
            return c;
        },
        // 根据car 生成一个对象 属性： "id":number,"id":number
        getGoodsNumber(state){
            var o = {};
            state.car.forEach(item => {
                o[item.id] = item.number;
            })
            return o;
        },
        // 根据car  形成 对象--> 属性： "id":selected,"id":selected
        getGoodsSelected(state){
            var o ={};
            state.car.forEach(item=>{
                o[item.id] = item.selected
            })
            return o;
        },
        getGoodsNumberAndSum(state){
            var o = {
                number:0, //勾选的数量
                sum:0   //勾选的总价
            };
            state.car.forEach(item=>{
                if (item.selected) {
                    o.number += item.number;
                    o.sum += item.price * item.number;
                }
            })
            return o;
        }
    }
})

// 引入路由模块
import VueRouter from "vue-router"
Vue.use(VueRouter)

// 导入vue-resource
import VueResource from "vue-resource"
Vue.use(VueResource)
// 全局配置请求的根路径
// Vue.http.options.root = url
// 全局配置 post 时 表单数据类型
// Vue.http.options.emulateJSON = true

// 引入mui
import "./lib/css/mui.min.css"
import "./lib/css/icons-extra.css"
import "./lib/js/mui.min.js"

// 按需导入mint-ui组件
// import { Header,Swipe, SwipeItem, Button,Lazyload} from 'mint-ui';
// import 'mint-ui/lib/style.css'
// Vue.component(Header.name, Header);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
// Vue.use(Lazyload);

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI);


// 导入router.js模块
import router from "./router.js"

// 导入vue-preview模块  图片预览
import VuePreview from 'vue-preview'
Vue.use(VuePreview);
 
// defalut install
Vue.use(VuePreview)

// 导入app组件
import app from "./app.vue"

var vm = new Vue({
    el:"#app",
    render: c => c(app),
    router,
    // 挂载vuex-store
    store,
})